<template>
  <div class="common-grid">
    <div
      v-for="(item, index) in data"
      :key="index"
      :style="{
        width: `calc(100% / ${cols})`,
        paddingTop: index < cols ? 0 : Taro.pxTransform(gap / 2),
        paddingBottom:
          index < Math.floor(data.length / cols) * cols
            ? Taro.pxTransform(gap / 2)
            : 0,
        paddingLeft: index % cols === 0 ? 0 : Taro.pxTransform(gap / 2),
        paddingRight: (index + 1) % cols === 0 ? 0 : Taro.pxTransform(gap / 2),
      }"
      class="common-grid__wrapped"
    >
      <slot :data="item"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
defineOptions({
  name: "common-grid",
});

export type CommonGridProps = {
  cols?: number;
  gap?: number;
  data?: any[];
};

withDefaults(defineProps<CommonGridProps>(), {
  cols: 2,
  gap: 16,
  data: () => [],
});
</script>

<style lang="less">
.common-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  &__wrapped {
    box-sizing: border-box;
  }
}
</style>
